<style lang="less" scoped>

    .card_list {
        margin-top: 0.16rem;
        &:first-of-type {
            margin-top: 0.24rem;
        }

        .card-padding {
            padding-top: 0.22rem;
            h3 {
                font-size: 0.28rem;
                margin: 0 0.26rem;
                font-weight: normal;
            }

            .list_text {
                margin: 0.32rem 0.26rem;

                .list_left {

                    h2 {
                        font-size: 0.39rem;
                        color: #d43228;
                        float: left;
                        font-weight: normal;
                    }

                    span {
                        font-size: 0.25rem;
                        color: #9a9a9a;
                        float: left;
                        margin-top: 0.1rem;
                        margin-left: 0.2rem;
                    }

                }
                .list_right {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    button {
                        width: 2.12rem;
                        height: 0.68rem;
                        font-size: 0.29rem;
                        padding: 0;
                        margin: 0;
                        background: #e94f4f;
                        color: #fff;
                        border-radius: 0.68rem;
                    }

                    span {
                        /*display: block;*/
                        color: #d43128;
                        font-size: 0.26rem;
                        margin-top: 0.24rem;
                        margin-right: 0.1rem;
                    }

                }
            }
        }
    }
</style>

<template>
    <div class="home_cont">
        <scroller :on-refresh="refresh"
                  :on-infinite="loadMore?infinite:getDone"
                  ref="myscroller">
            <div class="bannar_box">
                <swiper style="width:100%;margin:0 auto;" auto height="3.55rem">
                    <swiper-item v-for="item in demo03_list" class="black" @click.native="bannerClick(item)"><img
                            width="100%" v-lazy='{src:item.bannerImg,loading: bannerLoadImg, error: bannerLoadImg}'
                            alt=""></swiper-item>
                </swiper>
            </div>
            <div v-for="(list,index) in data" class="card_list" v-on:click="tabclick(list.type,list.templateId)">
                <card>
                    <img slot="header"
                         v-lazy="{src: list.productInfo.homeImage,loading:goodsBigloadImg,error:goodsBigloadImg}"
                         style="width:100%;display:block;margin:0 auto;">
                    <div slot="content" class="card-padding">
                        <h3><i :class="list.type == '3' || list.type == '1' ?'mall_proprietary_icon':list.type == '5'?'province_recommend_icon':''"></i>{{list.productInfo.name}}</h3>
                        <div class="list_text">
                            <flexbox>
                                <flexbox-item>
                                    <div class="list_left">
                                        <h2>￥{{list.minSellPrice}}</h2>
                                        <span>已拼{{list.sales}}件</span>
                                    </div>
                                </flexbox-item>
                                <flexbox-item>
                                    <div class="list_right">
                                        <span>{{list.leastCount}}人拼单</span>
                                        <button>去拼单<i class="right_write_icon" style="margin-left: 0.2rem;"></i>
                                        </button>
                                    </div>
                                </flexbox-item>
                            </flexbox>
                        </div>
                    </div>
                </card>
            </div>
            <load-more v-show="!loadMore" :show-loading="false" tip="我是有底线的" background-color="#fbf9fe"></load-more>
        </scroller>
    </div>
</template>
<script>
    import {
        Tab,
        TabItem,
        Sticky,
        Divider,
        XButton,
        Swiper,
        GroupTitle,
        SwiperItem,
        Card,
        Flexbox,
        FlexboxItem,
        Box,
        LoadMore
    } from 'vux'
    // display: block;
    export default {
        components: {
            Tab,
            TabItem,
            Sticky,
            Divider,
            XButton,
            Swiper,
            SwiperItem,
            Card, Flexbox, FlexboxItem,
            LoadMore
        },
        props: ['data'],
        data() {
            return {
                demo03_list: [],
                swiperItemIndex: 1,
                loadMore: false,
                bannerLoadImg: require('../../assets/img/banner_loadImg.png'),
                goodsBigloadImg: require('../../assets/img/goodsBig_loadImg.png'),
                scrollPos: 0
            }
        },
        mounted() {
            this.getBanner()
        },
        activated() {
            this.getBanner()
            if(this.scrollPos > 0){
                setTimeout(() => this.$refs.myscroller.scrollTo(0, this.scrollPos, false), 20)
            }
        },
        deactivated() {
            this.scrollPos = this.$refs.myscroller.getPosition().top
        },
        methods: {
            openUrl(index) {
                // console.log(index)
            },
            getBanner() {
                this.$ajax.getBanner({
                    pageSize: 5,
                    pageNum: 1,
                    location: 3,
                    queryType: 'App'
                })
                    .then(res => {
                        this.demo03_list = res.body.content.list
                    })
            },
            //  滚动到指定位置
            scrollTo(to){
                this.$refs.myscroller.scrollTo(0, to, false)
            },
            bannerClick(obj) {
                if (obj.businessType == "1" || obj.businessType == "3") {
                    this.$router.push("/home/product_details?type=" + obj.businessType + "&templateId=" + obj.businessId)
                } else if (obj.jumpUrl && obj.jumpUrl != null) {
                    this.Interactive.intoActivityWebView(obj.title, obj.jumpUrl)
                }
            },
            tabclick(type, templateId) {
                // this.Interactive.hiddenTabbar();
                this.$router.push({
                    path: '/home/product_details',
                    query: {
                        type: type,
                        templateId: templateId
                    }
                })
            },
            updateLoadMore(type) {
                this.loadMore = type;
            },
            refresh(done) {
                global.myLoad = true
                this.$emit("getList", [done]);
                this.$refs.myscroller.resize()
            },
            infinite(done) {
                console.log(this.loadMore)
                global.myLoad = true
                this.$emit("getList", [done, 'add']);
                this.$refs.myscroller.resize()
            },
            getDone(done) {
                this.$refs.myscroller.finishInfinite(2);
            }
        }
    }
</script>
